<template>
  <div
    v-if="isShow"
    v-hmd-mask
    class="ub ub-ver ub-ac mask-container"
    :class="[!config.hideMask?'mask':'',config.paddingTop?'paddingTop':'paddingCenter']"
    :style="{'padding-top':padTop}"
  >
    <div
      v-hmd-popup
      class="ub ub-ver contain ub-pb"
      :style="config.style ? config.style : {}"
    >
      <component
        :is="com"
        :params="config.params"
        @close="closeFn"
        @cancel="cancelFn"
        @confirm="saveFn"
      />
    </div>
  </div>
</template>
<script>
import {
  inject,
  defineComponent,
  onMounted,
  ref,
  defineAsyncComponent,
  computed,
} from 'vue';
export default defineComponent({
  directives: {
    'hmd-mask': {
      mounted(el) {
        /* 这个做寻找的时候的标记量 */
        el.classList.add('wc-messagebox__mask---');
        /* init */
        el.classList.add('wc-messagebox__mask-transition---');
        el.classList.add('wc-messagebox__mask-diff---');
        /* 移除以触发变化*/
        setTimeout(() => {
          el.classList.remove('wc-messagebox__mask-diff---');
        }, 50);
      },
    },
    'hmd-popup': {
      mounted(el) {
        /* 这个做寻找的时候的标记量 */
        el.classList.add('wc-messagebox__popup---');
        /* init */
        el.classList.add('wc-messagebox__popup-transition---');
        el.classList.add('wc-messagebox__popup-diff---');
        /* 移除以触发变化*/
        setTimeout(() => {
          el.classList.remove('wc-messagebox__popup-diff---');
        }, 50);
      },
    },
  },
  setup() {
    const config = inject('config');
    const isShow = ref(true);

    onMounted(() => {
      prevent();
      const listener = () => {
        isShow.value = false;
      };
      window.addEventListener('hashchange', listener);
      window.addEventListener('popstate', listener);
      window.addEventListener('pagehide', listener);
    });

    const com = defineAsyncComponent(() => config.com);

    const s = selector => {
      const selectors = document.querySelectorAll(selector);
      return selectors[selectors.length - 1];
    };

    const preventPageScroll = e => {
      return e.preventDefault();
    };

    const prevent = () => {
      document.addEventListener('touchmove', preventPageScroll, false);
    };

    const recover = () => {
      document.removeEventListener('touchmove', preventPageScroll, false);
    };

    const cancelFn = e => {
      const that = this;
      recover();
      /* 先要隐藏掉 mask 和 alert */
      s('.wc-messagebox__mask---').classList.add('wc-messagebox__mask-diff---');
      /* 这里 popup 放的是 mask-diff */
      s('.wc-messagebox__popup---').classList.add(
        'wc-messagebox__popup-leave---'
      );
      /* 在动画结束之后, 删掉元素 */
      s('.wc-messagebox__popup---').addEventListener(
        'transitionend',
        () => {
          isShow.value = false;
        },
        false
      );
      config.cancel && config.cancel(e);
    };

    const saveFn = e => {
      recover();
      /* 先要隐藏掉 mask 和 alert */
      s('.wc-messagebox__mask---').classList.add('wc-messagebox__mask-diff---');
      /* 这里 popup 放的是 mask-diff */
      s('.wc-messagebox__popup---').classList.add(
        'wc-messagebox__popup-leave---'
      );
      /* 在动画结束之后, 删掉元素 */
      s('.wc-messagebox__popup---').addEventListener(
        'transitionend',
        () => {
          isShow.value = false;
        },
        false
      );
      config.confirm && config.confirm(e);
    };

    const closeFn = e => {
      recover();
      /* 先要隐藏掉 mask 和 alert */
      s('.wc-messagebox__mask---').classList.add('wc-messagebox__mask-diff---');
      /* 这里 popup 放的是 mask-diff */
      s('.wc-messagebox__popup---').classList.add(
        'wc-messagebox__popup-leave---'
      );
      /* 在动画结束之后, 删掉元素 */
      s('.wc-messagebox__popup---').addEventListener(
        'transitionend',
        () => {
          isShow.value = false;
        },
        false
      );
      config.close && config.close(e);
    };
    const padTop = computed(() => {
      return config.paddingTop ? config.paddingTop + '%' : '0';
    });
    return {
      closeFn,
      cancelFn,
      saveFn,
      config,
      isShow,
      com,
      padTop,
    };
  },
});
</script>
<style scoped>
.tips {
  font-size: 15px;
  color: #333;
}
.text {
  color: #606266;
  font-size: 14px;
  margin-left: 10px;
}
.icon-Ic_Warning {
  color: #e6a23c;
  font-size: 20px;
  font-weight: 500;
}
.icon-Ic_Dialog_Close {
  color: #909399;
  cursor: pointer;
  font-size: 20px;
}
.icon-Ic_Dialog_Close:hover {
  color: #2562cc;
}
.contain {
  border-radius: 4px;
  z-index: 1000000;
  /* position: fixed;
  left: 50%;
  top: 50%; */
  transform: translate3d(-50%, -50%, 0);
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  overflow: auto;
}
.mask-container{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0);
}
.mask {
  background-color: rgba(0, 0, 0, 0.2);
}
.paddingTop{
  justify-content: flex-start;
}
.paddingCenter{
  justify-content: center;
}
@-webkit-keyframes hmdfade {
  0% {
    opacity: 0;
    top: 50%;
  }
  10% {
    opacity: 0.1;
    top: 49%;
  }
  30% {
    opacity: 0.3;
    top: 48%;
  }
  50% {
    opacity: 0.5;
    top: 48%;
  }
  70% {
    opacity: 0.7;
    top: 47%;
  }
  100% {
    opacity: 1;
    top: 46%;
  }
}
@keyframes hmdfade {
  0% {
    opacity: 1;
    top: 50%;
  }
  10% {
    opacity: 0.9;
    top: 49%;
  }
  30% {
    opacity: 0.7;
    top: 48%;
  }
  50% {
    opacity: 0.5;
    top: 48%;
  }
  70% {
    opacity: 0.3;
    top: 47%;
  }
  100% {
    opacity: 0;
    top: 46%;
  }
}

.hmd-fade-enter {
  opacity: 0;
  top: 50%;
}
.hmd-fade-leave-to {
  opacity: 0;
  top: 40%;
}
.hmd-fade-enter-active,
.hmd-fade-leave-active {
  transition: hmdfade 4s;
}
.hmdfade {
  transition: hmdfade 4s;
}
::-webkit-scrollbar {
  width: 12px;
}
.wc-messagebox__mask-transition--- {
  transition: all 0.4s;
}

.wc-messagebox__mask-diff--- {
  opacity: 0 !important;
}

.wc-messagebox__popup-transition--- {
  transition: all 0.4s;
}

.wc-messagebox__popup-diff--- {
  /* 因为用户有时候可能不是将 popup 写在 mask 里面的*/
  opacity: 0 !important;
  /* 因为用户可能已经设置了 popup 的 transform, 通常定位到中心就会这么做 */
  transform: translate3d(-50%, -50%, 0) scale(1.185) !important;
}

.wc-messagebox__popup-leave--- {
  opacity: 0 !important;
  transform: translate3d(-50%, -50%, 0) scale(0.5) !important;
}
</style>
